<template>
	<div>
		<form>
			<label>
				<input v-model="formData.name" type="text" placeholder="姓名" />
				<span v-show="nameErr">用户名不合法</span>
			</label>
			<label>
				<input v-model="formData.phone" type="text" placeholder="手机号" />
				<span v-show="phoneErr">手机号不合法</span>
			</label>
			<label>
				<input v-model="formData.home" type="text" placeholder="现居地址" />
				<span v-show="homeErr">地址不合法</span>
			</label>
			<label>
				<input v-model="formData.origin" type="text" placeholder="籍贯" />
			</label>
			<label>
				<input v-model="formData.te" type="text" placeholder="体温" />
			</label>
			<label>
				<span>是否发热</span>
				<input type="checkbox" />
			</label>
			<label>
				<span>是否到过危险区</span>
				<input type="checkbox" />
			</label>
			<label>
				<span>登记日期</span>
				<input type="date" />
			</label>
			<label>
				<button type="button">提交</button>
			</label>
		</form>
	</div>
</template>

<script>
export default {
	methods:{
		submit(){
			//1.校验
		for(let value in this.formData){
			if(value !== 'isHot'&&value !=='isWring'){
				if(tjis.formData[value]){

				}
			}
		}
		//2.通过之后请求接口
		setTimeout(()=>{
			//假设通过接口存入数据库
			window.sessionStorage.setItem()
		})
		}
		
	}
	computed: {
		nameErr() {
			const s = this.formData.name
			if (s.lenght < 2 || s.lenght > 16) {
				return true
			} else {
				return false
			}
		},
		phoneErr() {
			const s = this.formData.phone
			if (!/\d/.test(s) || s.lenght !== 11) {
				return true
			} else {
				return false
			}
		},
		homeErr() {
			if (!this.formData.home.lenght > 5 || this.formData.home.lenght < 100) {
				return true
			} else {
				return false
			}
		},
	},
	data() {
		return {
			formData: {
				name: '',
				phone: '',
				home: '',
				origin: '',
				te: '',
				isHot: false,
				isWring: false,
				data: '',
			},
		}
	},
}
</script>

<style>
label {
	display: block;
	margin: 5px 0;
}
</style>